<template>
  <div class="fixed top-0 left-0 bg-base-100 w-full h-full z-40 ">
    <!--顶部栏-->
    <div class="fixed z-50 flex justify-center items-center w-full h-[10vh] bg-primary  text-md">
      <div class="w-2/12 md:w-1/12 flex justify-center">
        <div @click="router.go(-1)" class="">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"/>
          </svg>
        </div>
      </div>
      <div class="w-10/12 md:w-10/12 flex justify-start pl-2">
        设置
      </div>
    </div>
    <!--内容-->
    <div class="overflow-y-auto w-full h-[90vh] fixed top-[10vh] left-0">
      <div class="flex flex-col justify-center items-center w-full ">
        <div class="max-w-screen-xl w-full bg-base-100 shadow-2xl flex flex-col justify-center items-center border">
          <div class="max-w-md w-full  text-left p-2">密码</div>
          <input v-model="pwd_1" type="password" placeholder="password..."
                 class="input input-bordered input-primary max-w-md w-full"/>
          <div class="max-w-md w-full  text-left p-2">再次输入</div>
          <input v-model="pwd_2" type="password" placeholder="again..."
                 :class="[{ 'input-primary': pwd_1==pwd_2 },'input input-bordered max-w-md w-full']"/>
          <div v-if="pwd_1!=pwd_2 && pwd_1!='' && pwd_2!='' "
               class="alert alert-error max-w-md w-full p-2 m-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none"
                 viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span>两次密码输入不正确</span>
          </div>
          <div v-if="updateFlag == true"
               class="alert alert-error max-w-md w-full p-2 m-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none"
                 viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span>密码保存失败，请检查网络设置</span>
          </div>
          <div class="join join-horizontal p-2 py-6">
            <button @click="editPassword()" :class="[{ 'btn-error': pwd_1!=pwd_2},'btn btn-primary join-item w-32']">保存</button>
            <button @click="router.go(-1)" class="btn join-item w-32">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "../plugins/router.ts";
import {onBeforeMount, ref} from "vue";
import {hook_getUser, hook_updateUser} from "../hook/UserHook.ts";
import {useToast} from "vue-toastification";

let pwd_1 = ref();
let pwd_2 = ref();

let user = ref()
onBeforeMount(() => {
  user.value = hook_getUser();
})


let updateFlag=ref(false)


async function editPassword() {
  if (pwd_1.value == pwd_2.value) {
    user.value['password'] = pwd_2.value;
    let flag = false
    try {
      let data = await hook_updateUser(user.value);
      flag = data?.['flag']
      console.log(data)
    } catch (e) {
      flag = false
    }
    if(flag == true){
      router.go(-1)
      useToast().success("密码修改成功")
    }else{
      updateFlag.value = true
      setTimeout(()=>{
        updateFlag.value = false
        useToast().error("密码修改失败")
      },3000)
    }
  }
}


</script>

<style scoped>

</style>